

<!DOCTYPE html>
<html lang="zh-CN" color-mode=light>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hexo-Themes-zhaoo 主题使用文档 - Xiaozhou`s Blog-小州的个人博客</title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="google" content="notranslate" />
  <meta name="keywords" content="Blog,Java,Spring,SpringBoot,SSM,Linux">
  <meta name="description" content="
 原文地址 www.izhaoo.com

关于指南...">
  <meta name="author" content="xiaozhou">
  <link rel="icon" href="/images/icons/favicon-16x16.png" type="image/png" sizes="16x16">
  <link rel="icon" href="/images/icons/favicon-32x32.png" type="image/png" sizes="32x32">
  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon.png" sizes="180x180">
  <meta rel="mask-icon" href="/images/icons/stun-logo.svg" color="#333333">
  
    <meta rel="msapplication-TileImage" content="/images/icons/favicon-144x144.png">
    <meta rel="msapplication-TileColor" content="#000000">
  

  
<link rel="stylesheet" href="/css/style.css">


  
    
<link rel="stylesheet" href="//at.alicdn.com/t/font_1445822_s6x2xcokxrl.css">

  

  
    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">

  

  
    
      
        
        
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/xcode.min.css" name="highlight-style" mode="light">

      
        
        
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/solarized-dark.min.css" name="highlight-style" mode="dark">

      
  

  <script>
    var CONFIG = window.CONFIG || {};
    var ZHAOO = window.ZHAOO || {};
    CONFIG = {
      isHome: false,
      fancybox: true,
      pjax: false,
      lazyload: {
        enable: true,
        only_post: 'false',
        loading: 'https://gitee.com/xiaozhoujun/personal-drawing-bed/raw/master/loading.gif'
      },
      donate: {
        enable: true,
        alipay: '/images/theme/alipay.jpg',
        wechat: '/images/theme/wechat.jpg'
      },
      galleries: {
        enable: true
      },
      fab: {
        enable: true,
        always_show: false
      },
      carrier: {
        enable: true
      },
      daovoice: {
        enable: false
      },
      preview: {
        background: {
          default: '/images/theme/welcome-image.jpg',
          api: 'https://api.ixiaowai.cn/gqapi/gqapi.php'
        },
        motto: {
          default: '我在开了灯的床头下，想问问自己的心啊。',
          api: 'https://v2.jinrishici.com/one.json',
          data_contents: '["data","content"]'
        },
      },
      qrcode: {
        enable: false,
        type: 'url',
        image: 'https://pic.izhaoo.com/weapp-code.jpg',
      },
      toc: {
        enable: true
      },
      scrollbar: {
        type: 'simple'
      },
      notification: {
        enable: false,
        delay: 4500,
        list: '',
        page_white_list: '',
        page_black_list: ''
      }
    }
  </script>

  

  

<meta name="generator" content="Hexo 5.3.0"></head>

<body class="lock-screen">
  <div class="loading"></div>
  


  <nav class="navbar">
    <div class="left">
      
      
        <i class="iconfont iconmoono" id="color-toggle" color-toggle="light"></i>
      
    </div>
    <div class="center">Hexo-Themes-zhaoo 主题使用文档</div>
    <div class="right">
      <i class="iconfont iconmenu j-navbar-menu"></i>
    </div>
    
  </nav>

  

<nav class="menu">
  <div class="menu-wrap">
    <div class="menu-close">
      <i class="iconfont iconbaseline-close-px"></i>
    </div>
    <ul class="menu-content"><li class="menu-item">
        <a href="/ " class="underline "> 首页</a>
      </li><li class="menu-item">
        <a href="/archives/ " class="underline "> 归档</a>
      </li><li class="menu-item">
        <a href="/galleries/ " class="underline "> 相册</a>
      </li><li class="menu-item">
        <a href="/tags/ " class="underline "> 标签</a>
      </li><li class="menu-item">
        <a href="/categories/ " class="underline "> 分类</a>
      </li><li class="menu-item">
        <a href="/friends/ " class="underline "> 友链</a>
      </li><li class="menu-item">
        <a href="/about/ " class="underline "> 关于</a>
      </li></ul>
    
      <div class="menu-copyright"><p>Powered by <a target="_blank" href="https://hexo.io">Hexo</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p></div>
    
  </div>
</nav>
  <main id="main">
  <div class="article-wrap">
    <div class="row container">
      <div class="col-xl-3"></div>
      <div class="col-xl-6"><article class="article">
  <div class="wrap">
    <section class="head">
  <img   class="lazyload" data-original="/images/post/cover-00.jpg" src=""  draggable="false">
  <div class="head-mask">
    <h1 class="head-title">Hexo-Themes-zhaoo 主题使用文档</h1>
    <div class="head-info">
      <span class="post-info-item"><i class="iconfont iconcalendar"></i>一月 11, 2021</span>
      
      <span class="post-info-item"><i class="iconfont iconfont-size"></i>16042</span>
    </div>
  </div>
</section>
    <section class="main">
      <section class="content">
        <blockquote>
<p> 原文地址 <a target="_blank" rel="noopener" href="https://www.izhaoo.com/2020/05/05/hexo-theme-zhaoo-doc/#Fab-%E5%8F%B3%E4%B8%8B%E8%A7%92%E6%8C%89%E9%92%AE">www.izhaoo.com</a></p>
</blockquote>
<h2 id="关于指南"><a href="#关于指南" class="headerlink" title="关于指南"></a>关于指南</h2><blockquote>
<p>如有疑惑欢迎加鹅群咨询：<strong>550262893</strong><br>约定：无特殊说明时，文中 <em>博客配置</em> 指 <code>/_config.yml</code>，<em>主题配置</em> 指 <code>/theme/hexo-theme-zhaoo/_config.yml</code>，缺省为 _主题配置_。</p>
</blockquote>
<p>文档更新于：2020 年 11 月 19 日</p>
<h2 id="快速开始"><a href="#快速开始" class="headerlink" title="快速开始"></a>快速开始</h2><h3 id="主题安装"><a href="#主题安装" class="headerlink" title="主题安装"></a>主题安装</h3><p>安装 <code>Hexo</code> 后进入根目录：</p>
<figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs powershell"><span class="hljs-variable">$</span> <span class="hljs-built_in">cd</span> hexo<br></code></pre></td></tr></table></figure>
<p>安装 <code>zhaoo</code> 主题：</p>
<figure class="highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs awk">$ git clone https:<span class="hljs-regexp">//gi</span>thub.com<span class="hljs-regexp">/izhaoo/</span>hexo-theme-zhaoo.git themes/zhaoo<br></code></pre></td></tr></table></figure>
<h3 id="开启主题"><a href="#开启主题" class="headerlink" title="开启主题"></a>开启主题</h3><p>修改 <code>Hexo</code> 根目录下的 <code>_config.yml</code> 文件启用 <code>zhaoo</code> 主题：</p>
<figure class="highlight avrasm"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs avrasm"><span class="hljs-symbol">theme:</span> zhaoo<br></code></pre></td></tr></table></figure>
<p>启动 <code>Hexo</code> 服务器预览：</p>
<figure class="highlight 1c"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs 1c">$ hexo clean <span class="hljs-meta">&amp;&amp; hexo s</span><br></code></pre></td></tr></table></figure>
<h3 id="博客配置"><a href="#博客配置" class="headerlink" title="博客配置"></a>博客配置</h3><p>编辑 <code>Hexo</code> 根目录下的 <code>_config.yml</code> 文件，配置博客网站相关功能，对整个网站生效。</p>
<p>建议将文章数量改为 <strong>9</strong> 篇：</p>
<figure class="highlight properties"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs properties"><span class="hljs-attr">index_generator</span>:<span class="hljs-string"></span><br>  <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;&#x27;</span><br>  <span class="hljs-attr">per_page</span>: <span class="hljs-string">9  </span><br>  <span class="hljs-attr">order_by</span>: <span class="hljs-string">-date</span><br></code></pre></td></tr></table></figure>
<p>启用代码高亮效果：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">highlight:</span><br>  <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>  <br>  <span class="hljs-attr">line_number:</span> <span class="hljs-literal">true</span><br>  <span class="hljs-attr">auto_detect:</span> <span class="hljs-literal">true</span><br>  <span class="hljs-attr">hljs:</span> <span class="hljs-literal">true</span><br>  <span class="hljs-attr">tab_replace:</span><br></code></pre></td></tr></table></figure>
<p>编辑 <code>zhaoo</code> 主题目录下的 <code>_config.yml</code> 文件，配置主题相关功能，只对主题生效。</p>
<p>建议参考 <a target="_blank" rel="noopener" href="https://github.com/izhaoo/hexo-theme-zhaoo/blob/master/_config.yml">_config.yml</a> 和本文进行配置，具体配置内容见下文。</p>
<h3 id="主题更新"><a href="#主题更新" class="headerlink" title="主题更新"></a>主题更新</h3><p>进入到 <code>zhaoo</code> 主题目录：</p>
<figure class="highlight powershell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs powershell"><span class="hljs-variable">$</span> <span class="hljs-built_in">cd</span> themes/zhaoo<br></code></pre></td></tr></table></figure>
<p>从 <code>GitHub</code> 获取更新：</p>
<figure class="highlight elixir"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs elixir"><span class="hljs-variable">$ </span>git pull<br></code></pre></td></tr></table></figure>
<h2 id="全局配置"><a href="#全局配置" class="headerlink" title="全局配置"></a>全局配置</h2><h3 id="导航菜单"><a href="#导航菜单" class="headerlink" title="导航菜单"></a>导航菜单</h3><p>配置项 <code>menu</code> 用于设置 <strong>导航菜单</strong>。</p>
<figure class="highlight vim"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs vim"><span class="hljs-keyword">menu</span>:<br>  home: / || 首页<br>  gallerie<span class="hljs-variable">s:</span> /galleries || 摄影<br>  archive<span class="hljs-variable">s:</span> /archives || 归档<br>  <span class="hljs-keyword">tag</span><span class="hljs-variable">s:</span> /<span class="hljs-keyword">tags</span> || 标签<br>  categorie<span class="hljs-variable">s:</span> /categories || 分类<br>  abou<span class="hljs-variable">t:</span> /about || 关于<br></code></pre></td></tr></table></figure>
<p>用 <strong>||</strong> 将内容分割为两部分，前面部分为页面 <code>URL</code>，后面部分为菜单中显示的名称。</p>
<p>对于系统默认页面，如 <code>归档（/archives）</code>、<code>首页（/）</code> 等，直接添加菜单即可；对于独立页面，如 <code>标签（tags）</code>、<code>分类（categories）</code>，则需先创建页面后再添加菜单。</p>
<h3 id="主题颜色"><a href="#主题颜色" class="headerlink" title="主题颜色"></a>主题颜色</h3><p>可以根据个人喜好，定制主题颜色。在配置项 <code>color</code> 中设置颜色。</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs less"><span class="hljs-attribute">color</span>:<br>  <span class="hljs-attribute">text</span>: <span class="hljs-string">&#x27;#33333D&#x27;</span><br>  <span class="hljs-attribute">text-secondary</span>: <span class="hljs-string">&#x27;#4e4e4e&#x27;</span><br>  <span class="hljs-attribute">text-third</span>: <span class="hljs-string">&#x27;#999999&#x27;</span><br>  <span class="hljs-attribute">background</span>: <span class="hljs-string">&#x27;#ffffff&#x27;</span><br>  <span class="hljs-attribute">background-secondary</span>: <span class="hljs-string">&#x27;#f6f8fa&#x27;</span><br>  <span class="hljs-attribute">border</span>: <span class="hljs-string">&#x27;#eeeeee&#x27;</span><br>  <span class="hljs-attribute">text-dark</span>: <span class="hljs-string">&#x27;#dddddd&#x27;</span><br>  <span class="hljs-attribute">text-secondary-dark</span>: <span class="hljs-string">&#x27;#9899ab&#x27;</span><br>  <span class="hljs-attribute">text-third-dark</span>: <span class="hljs-string">&#x27;#7d8594&#x27;</span><br>  <span class="hljs-attribute">background-dark</span>: <span class="hljs-string">&#x27;#1e2128&#x27;</span><br>  <span class="hljs-attribute">background-secondary-dark</span>: <span class="hljs-string">&#x27;#1a1d22&#x27;</span><br>  <span class="hljs-attribute">border-dark</span>: <span class="hljs-string">&#x27;#2b3038&#x27;</span><br>  <span class="hljs-attribute">link</span>: <span class="hljs-string">&#x27;#FF3B00&#x27;</span><br></code></pre></td></tr></table></figure>
<p>可以使用 <code>十六进制</code>、<code>rgba</code>、<code>颜色名称</code> 方式，注意需要用引号包裹。</p>
<p>目前有两套颜色模式，分别是 <strong>浅色模式（白天）</strong> 和 <strong>深色模式（黑夜）</strong>，请注意颜色搭配。<code>link</code> 为强调色，表现为 <code>hover</code>、<code>active</code> 等。</p>
<p>分享几个配色网站：<a target="_blank" rel="noopener" href="https://colors.ichuantong.cn/">中国传统颜色</a>、<a target="_blank" rel="noopener" href="https://nipponcolors.com/">日本传统颜色</a></p>
<h3 id="站点图标"><a href="#站点图标" class="headerlink" title="站点图标"></a>站点图标</h3><p>配置项 <code>favicon</code> 可设置站点图标，建议使用 <code>ico</code> 或 <code>png</code> 格式。</p>
<figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs dts"><span class="hljs-symbol">favicon:</span><br><span class="hljs-symbol">  small:</span> <span class="hljs-meta-keyword">/images/</span>icons/favicon<span class="hljs-number">-16</span>x16.png<br><span class="hljs-symbol">  medium:</span> <span class="hljs-meta-keyword">/images/</span>icons/favicon<span class="hljs-number">-32</span>x32.png<br><span class="hljs-symbol">  apple_touch_icon:</span> <span class="hljs-meta-keyword">/images/</span>icons/apple-touch-icon.png<br><span class="hljs-symbol">  safari_pinned_tab:</span> <span class="hljs-meta-keyword">/images/</span>icons/stun-logo.svg<br><span class="hljs-symbol">  msapplication:</span> <span class="hljs-meta-keyword">/images/</span>icons/favicon<span class="hljs-number">-144</span>x144.png<br></code></pre></td></tr></table></figure>
<p>有多种尺寸的图片需要配置，可以参考默认图标的尺寸用 <code>PS</code> 裁剪，或使用：<a target="_blank" rel="noopener" href="https://icon.wuruihong.com/">图标工厂</a></p>
<h3 id="全局字体"><a href="#全局字体" class="headerlink" title="全局字体"></a>全局字体</h3><p>配置项 <code>font</code> 中可设置全局字体的 <strong>大小</strong> 和 <strong>风格系列</strong>。</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs less"><span class="hljs-attribute">font</span>:<br>  <span class="hljs-attribute">size</span>: <span class="hljs-number">14px</span><br>  <span class="hljs-attribute">family</span>: <span class="hljs-string">&#x27;Hiragino Sans GB&#x27;</span>, <span class="hljs-string">&#x27;Hiragino Sans GB W3&#x27;</span>, <span class="hljs-string">&#x27;Microsoft YaHei&#x27;</span>, <span class="hljs-string">&#x27;WenQuanYi Micro Hei&#x27;</span>, sans-serif<br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>size</code>: 字体大小。</li>
<li>  <code>family</code>: 字体风格系列。</li>
</ul>
<h3 id="背景图片"><a href="#背景图片" class="headerlink" title="背景图片"></a>背景图片</h3><p>配置项 <code>background_image</code> 可设置背景图片，直接填写图片地址即可。</p>
<figure class="highlight avrasm"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs avrasm"><span class="hljs-symbol">background_image:</span><br></code></pre></td></tr></table></figure>
<p>tips: 建议不设置背景图片，默认的 <strong>纯白背景</strong> 最搭配，背景颜色也可在 <a href="#%E4%B8%BB%E9%A2%98%E9%A2%9C%E8%89%B2">主题颜色</a> 中设置。</p>
<h3 id="Loading-加载动画"><a href="#Loading-加载动画" class="headerlink" title="Loading (加载动画)"></a>Loading (加载动画)</h3><p>配置项 <code>loading</code> 可设置载入动画，会在 <em>页面跳转_、_懒加载</em> 时加载，目前仅支持图片形式。</p>
<figure class="highlight arcade"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs arcade">loading: <span class="hljs-regexp">/images/</span>theme/loading.gif<br></code></pre></td></tr></table></figure>
<p>建议使用 <code>gif</code> 动图，可在 <a target="_blank" rel="noopener" href="https://lottiefiles.com/">LottieFiles</a> 下载。</p>
<p>tips: 未来将支持自定义 <code>css</code>、<code>svg</code> 等多种方式的载入动画，敬请期待。</p>
<h3 id="欢迎页面"><a href="#欢迎页面" class="headerlink" title="欢迎页面"></a>欢迎页面</h3><p>配置项 <code>preview</code> 中的一些列配置可自定义欢迎页面。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">preview:</span><br>  <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span><br>  <span class="hljs-attr">model:</span> <span class="hljs-string">wave</span> <br>  <span class="hljs-attr">background:</span> <br>    <span class="hljs-attr">default:</span> <span class="hljs-string">/images/theme/welcome-image.jpg</span><br>    <span class="hljs-attr">api:</span> <br>    <span class="hljs-attr">size:</span> <span class="hljs-string">cover</span> <br>    <span class="hljs-attr">position:</span> <span class="hljs-string">center</span> <br>  <span class="hljs-attr">motto:</span><br>    <span class="hljs-attr">default:</span> <span class="hljs-string">我在开了灯的床头下，想问问自己的心啊。</span><br>    <span class="hljs-attr">api:</span> <span class="hljs-string">https://v1.hitokoto.cn/?encode=text&amp;c=j</span><br>    <span class="hljs-attr">color:</span> <span class="hljs-string">&#x27;#ffffff&#x27;</span><br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>enable</code>: 用来 <em>开启</em> / <em>关闭</em> 欢迎页面。</li>
</ul>
<h4 id="效果模式"><a href="#效果模式" class="headerlink" title="效果模式"></a>效果模式</h4><ul>
<li>  <code>model</code>: 设置效果模式，有 *** 波浪（wave）** 和 <strong>云层（cloud）</strong> 两种模式可选择。</li>
</ul>
<h4 id="欢迎图片"><a href="#欢迎图片" class="headerlink" title="欢迎图片"></a>欢迎图片</h4><p>配置项 <code>background</code> 用来设置欢迎图片，其中：</p>
<ul>
<li>  <code>default</code>: 配置静态图片，填写静态图片 <code>URL</code> 即可。</li>
<li>  <code>api</code>: 配置随机图片，可使用第三方 <code>API</code>，优先级 <em>随机图片（api）</em> &gt; _静态图片（default）_。推荐 <code>API</code>：<a target="_blank" rel="noopener" href="https://source.unsplash.com/random/1920x1080">Unsplash</a>、<a target="_blank" rel="noopener" href="https://api.vvhan.com/api/bing?type=sj">必应图片</a>。</li>
<li>  <code>size</code> 和 <code>position</code>: 设置图片的 <strong>尺寸</strong> 和 <strong>位置</strong>，参考 <code>CSS</code> 中的属性即可。</li>
</ul>
<h4 id="格言"><a href="#格言" class="headerlink" title="格言"></a>格言</h4><p>配置项 <code>motto</code> 用来设置格言，其中：</p>
<ul>
<li>  <code>default</code>: 配置静态格言，填写格言文本即可。</li>
<li>  <code>api</code>: 配置随机格言，可使用第三方 <code>API</code>，优先级 <em>随机格言（api）</em> &gt; _静态格言（default）_。推荐 <code>API</code>：<a target="_blank" rel="noopener" href="https://hitokoto.cn/">一言</a>、<a target="_blank" rel="noopener" href="https://www.jinrishici.com/">今日诗词</a>。</li>
<li>  <code>color</code> 配置文字颜色。</li>
</ul>
<h3 id="版权信息"><a href="#版权信息" class="headerlink" title="版权信息"></a>版权信息</h3><p>配置项 <code>copyright</code> 用来设置页面底部显示的网站版权信息，填写 <strong>文本内容</strong> 或 <strong>HTML</strong> 即可。</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs xml">copyright: <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Powered by <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">target</span>=<span class="hljs-string">&quot;_blank&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://hexo.io&quot;</span>&gt;</span>Hexo<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>  |  Theme - <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">target</span>=<span class="hljs-string">&quot;_blank&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;https://github.com/izhaoo/hexo-theme-zhaoo&quot;</span>&gt;</span>zhaoo<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br></code></pre></td></tr></table></figure>
<h3 id="社交链接"><a href="#社交链接" class="headerlink" title="社交链接"></a>社交链接</h3><p>配置项 <code>social</code> 用来配置社交链接，在页面底部以 <code>Icon</code> 图标的形式展示，点击即可链接第三方平台。</p>
<figure class="highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs awk">social:<br>  qq: tencent:<span class="hljs-regexp">//m</span>essage/?Menu=yes&amp;uin=<span class="hljs-number">894519210</span> || iconQQ || <span class="hljs-string">&#x27;#12B7F5&#x27;</span><br>  wechat: javascript:; || iconwechat-fill || <span class="hljs-string">&#x27;#09BB07&#x27;</span><br>  instagram: https:<span class="hljs-regexp">//</span>www.instagram.com<span class="hljs-regexp">/izhaoo/</span> || iconinstagram || <span class="hljs-string">&#x27;#DA2E76&#x27;</span><br>  github: https:<span class="hljs-regexp">//gi</span>thub.com/izhaoo || icongithub-fill || <span class="hljs-string">&#x27;#24292E&#x27;</span><br>  email: mailto:izhaoo@<span class="hljs-number">163</span>.com || iconmail<br></code></pre></td></tr></table></figure>
<p>配置内容分为三部分，以 <code>||</code> 划分。第一部分是 <em>社交链接</em> ，第二部分是 <em>图标样式（IconFont）</em> ，第三部分是 _选中颜色（hover）_。</p>
<h3 id="Fab-右下角按钮"><a href="#Fab-右下角按钮" class="headerlink" title="Fab (右下角按钮)"></a>Fab (右下角按钮)</h3><p>配置项 <code>fab</code> 用于配置右下角的按钮。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">fab:</span><br>  <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span><br>  <span class="hljs-attr">always_show:</span> <span class="hljs-literal">false</span><br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>enable</code>: 设置 <em>开启</em> / <em>关闭</em> 按钮。</li>
<li>  <code>always_show</code>: 设置 <em>一直显示</em> / <em>过渡隐藏</em> 按钮。</li>
</ul>
<h3 id="二维码"><a href="#二维码" class="headerlink" title="二维码"></a>二维码</h3><p>配置项 <code>qrcode</code> 用来设置 <strong>二维码</strong>，开启后点击 <strong>导航栏</strong> 左侧的图标即可显示。</p>
<figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs dts"><span class="hljs-symbol">qrcode:</span><br><span class="hljs-symbol">  enable:</span> true<br><span class="hljs-symbol">  type:</span> image <br><span class="hljs-symbol">  image:</span> https:<span class="hljs-comment">//pic.izhaoo.com/weapp-code.jpg</span><br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>enable</code>: 设置 <em>开启</em> / <em>关闭</em> 二维码功能。</li>
<li>  <code>type</code>: 设置二维码模式，有两种模式可选。<code>url</code> 显示当前文章链接生成的二维码；<code>image</code> 显示固定的二维码图片（如小程序码等）。</li>
<li>  <code>image</code>: 选择 <code>image</code> 模式时需要指定图片链接。</li>
</ul>
<h3 id="深色模式"><a href="#深色模式" class="headerlink" title="深色模式"></a>深色模式</h3><p>配置项 <code>color_mode</code> 用来配置 <strong>深色模式</strong>。开启后主题会根据设备系统自动切换颜色模式，用户也可以点击 <strong>导航栏</strong> 左侧的图标手动切换颜色模式，系统会暂存用户选择状态。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">color_mode:</span><br>  <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span><br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>enable</code>: <em>开启</em> / <em>关闭</em> 深色模式。</li>
</ul>
<p><em>深色模式</em> / <em>浅色模式</em> 的颜色可以参考 <a href="#%E4%B8%BB%E9%A2%98%E9%A2%9C%E8%89%B2">主题颜色</a> 设置。</p>
<h3 id="哀悼模式"><a href="#哀悼模式" class="headerlink" title="哀悼模式"></a>哀悼模式</h3><p>在举国默哀的日子，我们可以将博客灰化，通过配置项 <code>gray</code> 设置。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">gray:</span><br>  <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span><br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>enable</code>: <em>开启</em> / <em>关闭</em> 哀悼模式。</li>
</ul>
<p><a target="_blank" rel="noopener" href="https://pic.izhaoo.com/20201016102727.jpg"><img   class="lazyload" data-original="https://pic.izhaoo.com/20201016102727.jpg" src="" ></a>哀悼</p>
<h2 id="文章配置"><a href="#文章配置" class="headerlink" title="文章配置"></a>文章配置</h2><h3 id="文章封面"><a href="#文章封面" class="headerlink" title="文章封面"></a>文章封面</h3><h4 id="单独封面"><a href="#单独封面" class="headerlink" title="单独封面"></a>单独封面</h4><p>可以为每篇文章设置单独的文章封面图片，在文章 <code>Front-matter</code> 中添加 <code>image</code> 字段设置图片。</p>
<p>若使用图床，直接添加图片文件的 <strong>完整 URL</strong> 即可：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-meta">---</span><br><span class="hljs-attr">title:</span> <span class="hljs-string">zhaoo</span> <span class="hljs-bullet">-</span> <span class="hljs-string">主题文档</span><br><span class="hljs-attr">image:</span> <span class="hljs-string">https://pic.izhaoo.com/20200421200902.jpg</span>  <span class="hljs-comment">#设置图床图片</span><br><span class="hljs-meta">---</span><br></code></pre></td></tr></table></figure>
<p>若将图片储存在本地，现将图片文件复制到主题 <code>~/zhaoo/source/images</code> 下，再添加 <strong>相对 URL</strong> 即可：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-meta">---</span><br><span class="hljs-attr">title:</span> <span class="hljs-string">zhaoo</span> <span class="hljs-bullet">-</span> <span class="hljs-string">主题使用文档</span><br><span class="hljs-attr">image:</span> <span class="hljs-string">/images/20200421200902.jpg</span>  <span class="hljs-comment">#设置本地图片</span><br><span class="hljs-meta">---</span><br></code></pre></td></tr></table></figure>
<h4 id="默认封面"><a href="#默认封面" class="headerlink" title="默认封面"></a>默认封面</h4><p>配置项 <code>post_image</code> 设置配置文章默认封面，就不用为每篇文章单独设置封面了：</p>
<figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs dts"><span class="hljs-symbol">post_image:</span><br><span class="hljs-symbol">  random:</span> galleries <br><span class="hljs-symbol">  default:</span> <span class="hljs-meta-keyword">/images/</span>theme/post-image.jpg<br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>random</code>: 设置随机封面，有 <strong>galleries（相册图库）</strong> 和 <strong>local（本地图库）</strong> 两种模式。开启 <a href="#%E7%9B%B8%E5%86%8C">相册</a> 功能后会自动调取相册中的图片；本地图库需要新建 <code>/_data/local_images.json</code> 文件，填写图片 <code>URL</code> 列表即可。</li>
<li>  <code>default</code>: 未设置随机封面时启用 <strong>默认封面</strong>，填写图片 <code>URL</code> 即可。</li>
</ul>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs json">[<br>  <span class="hljs-string">&quot;https://pic.izhaoo.com/2014031601.jpg&quot;</span>,<br>  <span class="hljs-string">&quot;https://pic.izhaoo.com/2017071602.jpg&quot;</span>,<br>  <span class="hljs-string">&quot;https://pic.izhaoo.com/2017071603.jpg&quot;</span>,<br>  <span class="hljs-string">&quot;https://pic.izhaoo.com/2017072104.jpg&quot;</span>,<br>  <span class="hljs-string">&quot;https://pic.izhaoo.com/2017072705.jpg&quot;</span>,<br>  <span class="hljs-string">&quot;https://pic.izhaoo.com/20200421201200.jpg&quot;</span>,<br>  <span class="hljs-string">&quot;https://pic.izhaoo.com/20200305030152.jpg&quot;</span>,<br>  <span class="hljs-string">&quot;https://pic.izhaoo.com/20191211065241.jpg&quot;</span>,<br>  <span class="hljs-string">&quot;https://pic.izhaoo.com/20200228081718.jpg&quot;</span>,<br>  <span class="hljs-string">&quot;https://pic.izhaoo.com/20191211065844.jpg&quot;</span>,<br>  <span class="hljs-string">&quot;https://pic.izhaoo.com/20200718151924.jpg&quot;</span>,<br>  <span class="hljs-string">&quot;https://pic.izhaoo.com/20200718152003.jpg&quot;</span>,<br>  <span class="hljs-string">&quot;https://pic.izhaoo.com/20200718152045.jpg&quot;</span>,<br>  <span class="hljs-string">&quot;https://pic.izhaoo.com/20200718152122.jpg&quot;</span>,<br>  <span class="hljs-string">&quot;https://pic.izhaoo.com/20200718151427.jpg&quot;</span><br>]<br></code></pre></td></tr></table></figure>
<h3 id="关键词"><a href="#关键词" class="headerlink" title="关键词"></a>关键词</h3><p>在文章 <code>Front-matter</code> 中添加 <code>keywords</code> 字段设置关键词：</p>
<figure class="highlight avrasm"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs avrasm"><span class="hljs-symbol">title:</span> zhaoo - 主题使用文档<br><span class="hljs-symbol">keywords:</span> hexo-theme-zhaoo, hexo, 主题, 使用文档, document<br></code></pre></td></tr></table></figure>
<p>配置项 <code>keywords</code> 为网站设置全局关键词，每个页面都会渲染，文章中无需重复添加：</p>
<figure class="highlight avrasm"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs avrasm"><span class="hljs-symbol">keywords:</span> hexo-theme-zhaoo, hexo<br></code></pre></td></tr></table></figure>
<h3 id="文章尺寸"><a href="#文章尺寸" class="headerlink" title="文章尺寸"></a>文章尺寸</h3><p>配置项 <code>post_page_size</code> 用于设置文章内容主体部分的相关尺寸。</p>
<figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs dts"><span class="hljs-symbol">post_page_size:</span><br><span class="hljs-symbol">  width:</span> <span class="hljs-number">800</span>px<br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>width</code>: 设置内容宽度。</li>
</ul>
<p>tips: 受外部元素的限制，<em>实际尺寸</em> 由计算后得出，不能保证与 <em>设定尺寸</em> 完全相等，只能保证接近该尺寸。</p>
<h3 id="图片标注"><a href="#图片标注" class="headerlink" title="图片标注"></a>图片标注</h3><p>配置项 <code>caption</code> 用于设置 <strong>图片标注</strong>，开启后会在文章图片下方生成标注。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">caption:</span><br>  <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span><br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>enable</code>: <em>开启</em> / <em>关闭</em> 图片标注。</li>
</ul>
<h3 id="文章目录"><a href="#文章目录" class="headerlink" title="文章目录"></a>文章目录</h3><p>配置项 <code>toc</code> 用于设置 <strong>文章目录</strong>，开启后会在文章内容右侧生成目录，点击目录可平滑到对应的标题处。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">toc:</span><br>  <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span><br>  <span class="hljs-attr">min_depth:</span> <span class="hljs-number">1</span><br>  <span class="hljs-attr">max_depth:</span> <span class="hljs-number">3</span><br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>enable</code>: <em>开启</em> / <em>关闭</em> 文章目录。</li>
<li>  <code>min_depth</code>:</li>
<li>  <code>max_depth</code>:</li>
</ul>
<p>全局开启 <strong>文章目录</strong> 后，可以在文章 <code>Front-matter</code> 中添加 <code>toc</code> 字段单独控制该文章是否展示文章目录。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-meta">---</span><br><span class="hljs-attr">title:</span> <span class="hljs-string">zhaoo</span> <span class="hljs-bullet">-</span> <span class="hljs-string">主题文档</span><br><span class="hljs-attr">toc:</span> <span class="hljs-literal">false</span> <span class="hljs-comment"># 关闭文章目录</span><br><span class="hljs-meta">---</span><br></code></pre></td></tr></table></figure>
<h3 id="打赏二维码"><a href="#打赏二维码" class="headerlink" title="打赏二维码"></a>打赏二维码</h3><p>配置项 <code>donate</code> 用于设置 <strong>打赏二维码</strong>，开启后可在文章下方展示二维码，扫一扫请博主喝杯咖啡吧~</p>
<figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs dts"><span class="hljs-symbol">donate:</span><br><span class="hljs-symbol">  enable:</span> true<br><span class="hljs-symbol">  alipay:</span> https:<span class="hljs-comment">//pic.izhaoo.com/alipay.jpg</span><br><span class="hljs-symbol">  wechat:</span> https:<span class="hljs-comment">//pic.izhaoo.com/wechat.jpg</span><br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>enable</code>: <em>开启</em> / <em>关闭</em> 打赏二维码。</li>
<li>  <code>alipay</code>: 支付宝收款二维码，填写图片 <code>URL</code>。</li>
<li>  <code>wechat</code>: 微信收款二维码，填写图片 <code>URL</code>。</li>
</ul>
<h3 id="文章版权"><a href="#文章版权" class="headerlink" title="文章版权"></a>文章版权</h3><p>配置项 <code>post_copyright</code> 用于设置 <strong>文章版权</strong>，开启后可在文章下方展示版权信息。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">post_copyright:</span><br>  <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span><br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>enable</code>: <em>开启</em> / <em>关闭</em> 文章版权信息。</li>
</ul>
<p>全局开启 <strong>文章版权</strong> 后，可以在文章 <code>Front-matter</code> 中添加 <code>copyright</code> 字段单独控制该文章是否展示文章版权。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-meta">---</span><br><span class="hljs-attr">title:</span> <span class="hljs-string">zhaoo</span> <span class="hljs-bullet">-</span> <span class="hljs-string">主题文档</span><br><span class="hljs-attr">copyright:</span> <span class="hljs-literal">false</span> <span class="hljs-comment"># 关闭文章版权</span><br><span class="hljs-meta">---</span><br></code></pre></td></tr></table></figure>
<h3 id="文章搬运"><a href="#文章搬运" class="headerlink" title="文章搬运"></a>文章搬运</h3><p>配置项 <code>carrier</code> 用于开启 <strong>文章搬运</strong> 功能，方便博主们全文 “借鉴” 文章，效果如下：</p>
<p><a target="_blank" rel="noopener" href="https://pic.izhaoo.com/20200727125519.jpg"><img   class="lazyload" data-original="https://pic.izhaoo.com/20200727125519.jpg" src="" ></a>文章搬运</p>
<p><a target="_blank" rel="noopener" href="https://pic.izhaoo.com/20200727125724.jpg"><img   class="lazyload" data-original="https://pic.izhaoo.com/20200727125724.jpg" src="" ></a>弹窗提示</p>
<p>前置条件：全局开启 <a href="#%E6%96%87%E7%AB%A0%E7%89%88%E6%9D%83">文章版权</a></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">carrier:</span><br>  <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span><br>  <span class="hljs-attr">type:</span> <span class="hljs-string">markdown</span><br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>enable</code>: <em>开启</em> / <em>关闭</em> 文章搬运。</li>
<li>  <code>type</code>: 搬运模式，可选择一键复制 <code>markdown</code>、<code>html</code>、<code>text</code> 格式的文章。</li>
</ul>
<blockquote>
<p><a target="_blank" rel="noopener" href="http://localhost:4000/2020/07/25/hexo-article-carrier/">Hexo - 开发文章搬运功能</a></p>
</blockquote>
<h3 id="文章置顶"><a href="#文章置顶" class="headerlink" title="文章置顶"></a>文章置顶</h3><p>找到 <code>/node_modules/hexo-generator-index/lib/generator.js</code> 文件，替换成如下代码：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-meta">&#x27;use strict&#x27;</span>;<br><span class="hljs-keyword">var</span> pagination = <span class="hljs-built_in">require</span>(<span class="hljs-string">&#x27;hexo-pagination&#x27;</span>);<br><span class="hljs-built_in">module</span>.exports = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">locals</span>) </span>&#123;<br>  <span class="hljs-keyword">var</span> config = <span class="hljs-built_in">this</span>.config;<br>  <span class="hljs-keyword">var</span> posts = locals.posts;<br>  posts.data = posts.data.sort(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">a, b</span>) </span>&#123;<br>    <span class="hljs-keyword">if</span> (a.top &amp;&amp; b.top) &#123;<br>      <span class="hljs-keyword">if</span> (a.top == b.top) <span class="hljs-keyword">return</span> b.date - a.date;<br>      <span class="hljs-keyword">else</span> <span class="hljs-keyword">return</span> b.top - a.top;<br>    &#125; <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (a.top &amp;&amp; !b.top) &#123;<br>      <span class="hljs-keyword">return</span> -<span class="hljs-number">1</span>;<br>    &#125; <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (!a.top &amp;&amp; b.top) &#123;<br>      <span class="hljs-keyword">return</span> <span class="hljs-number">1</span>;<br>    &#125; <span class="hljs-keyword">else</span> <span class="hljs-keyword">return</span> b.date - a.date;<br>  &#125;);<br>  <span class="hljs-keyword">var</span> paginationDir = config.pagination_dir || <span class="hljs-string">&#x27;page&#x27;</span>;<br>  <span class="hljs-keyword">return</span> pagination(<span class="hljs-string">&#x27;&#x27;</span>, posts, &#123;<br>    perPage: config.index_generator.per_page,<br>    layout: [<span class="hljs-string">&#x27;index&#x27;</span>, <span class="hljs-string">&#x27;archive&#x27;</span>],<br>    format: paginationDir + <span class="hljs-string">&#x27;/%d/&#x27;</span>,<br>    data: &#123;<br>      __index: <span class="hljs-literal">true</span><br>    &#125;<br>  &#125;);<br>&#125;;<br></code></pre></td></tr></table></figure>
<p>在文章的 <code>Front-matter</code> 中添加 <code>top</code> 字段，指定数值。数值越大，显示越靠前。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-meta">---</span><br><span class="hljs-attr">title:</span> <span class="hljs-string">zhaoo</span> <span class="hljs-bullet">-</span> <span class="hljs-string">主题使用文档</span><br><span class="hljs-attr">top:</span> <span class="hljs-number">10</span>  <span class="hljs-comment">#添加该字段</span><br><span class="hljs-meta">---</span><br></code></pre></td></tr></table></figure>
<h3 id="数学公式"><a href="#数学公式" class="headerlink" title="数学公式"></a>数学公式</h3><h4 id="MathJax"><a href="#MathJax" class="headerlink" title="MathJax"></a><a href="#MathJax" title="MathJax"></a>MathJax</h4><blockquote>
<p><a target="_blank" rel="noopener" href="https://github.com/ikeq/hexo-filter-mathjax-ssr">hexo-filter-mathjax-ssr</a></p>
</blockquote>
<p>以 <code>svg</code> 的形式渲染数学公式，兼容性较好，推荐使用。</p>
<p>安装 <code>MathJax</code> 插件依赖：</p>
<figure class="highlight livecodeserver"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs livecodeserver">$ npm install hexo-<span class="hljs-built_in">filter</span>-mathjax-ssr <span class="hljs-comment">--save</span><br></code></pre></td></tr></table></figure>
<p>开启插件，在 <strong>博客配置</strong> 下新增：</p>
<figure class="highlight prolog"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs prolog">mathjax:<br>  inlineQuote: [<span class="hljs-string">&#x27;&#x27;</span>]<br>  blockQuote: [<span class="hljs-string">&#x27;MATHJAX-SSR-0&#x27;</span>]<br></code></pre></td></tr></table></figure>
<h4 id="KaTex"><a href="#KaTex" class="headerlink" title="KaTex"></a>KaTex</h4><blockquote>
<p><a target="_blank" rel="noopener" href="https://github.com/thcd/hexo-katex">hexo-katex</a></p>
</blockquote>
<p>以 <code>HTML</code> 标签的形式渲染数学公式，渲染速度较快，语法较简单，但是兼容性不是很好。</p>
<p>安装渲染引擎 <code>hexo-renderer-pandoc</code>：</p>
<figure class="highlight ada"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs ada">$ npm install hexo-renderer-pandoc <span class="hljs-comment">--save</span><br></code></pre></td></tr></table></figure>
<p>安装 <code>KaTex</code> 插件依赖：</p>
<figure class="highlight ada"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs ada">$ npm install hexo-katex <span class="hljs-comment">--save</span><br></code></pre></td></tr></table></figure>
<p>开启插件，在 <strong>博客配置</strong> 下新增：</p>
<figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs dts"><span class="hljs-symbol">pandoc:</span><br><span class="hljs-symbol">  mathEngine:</span> katex<br></code></pre></td></tr></table></figure>
<h2 id="页面配置"><a href="#页面配置" class="headerlink" title="页面配置"></a>页面配置</h2><h3 id="相册页面"><a href="#相册页面" class="headerlink" title="相册页面"></a>相册页面</h3><p>执行以下命令创建相册页面，会在 <code>source</code> 目录生成 <code>galleries/index.md</code> 文件：</p>
<figure class="highlight haxe"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs haxe">$ hexo <span class="hljs-keyword">new</span> <span class="hljs-type">page</span> galleries<br></code></pre></td></tr></table></figure>
<p>打开 <code>source/galleries/index.md</code> 文件，设置 <code>Front-matter</code> ，开启相册页面：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-meta">---</span><br><span class="hljs-attr">title:</span> <span class="hljs-string">相册</span><br><span class="hljs-attr">layout:</span> <span class="hljs-string">&quot;galleries&quot;</span><br><span class="hljs-meta">---</span><br></code></pre></td></tr></table></figure>
<p>参考 <a href="#%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95">导航菜单</a> 设置相册页面的导航：</p>
<figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs dts"><span class="hljs-symbol">menu:</span><br><span class="hljs-symbol">  galleries:</span> /galleries || 相册<br></code></pre></td></tr></table></figure>
<p>配置项 <code>galleries</code> 用于开启相册功能：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">galleries:</span><br>  <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span><br>  <span class="hljs-attr">title:</span> <span class="hljs-string">相册</span><br>  <span class="hljs-attr">subtitle:</span> <span class="hljs-string">Galleries</span><br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>enable</code>: <em>开启</em> / <em>关闭</em> 相册功能。</li>
<li>  <code>title</code>: 相册分类页面标题。</li>
<li>  <code>subtitle</code> 相册分类页面副标题。</li>
</ul>
<p>在 <code>/_data</code> 目录下新建 <code>galleries.json</code> 文件，创建相册分类目录及图片内容：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><code class="hljs json">[&#123;<br>  <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;colorful&quot;</span>,  <br>  <span class="hljs-attr">&quot;cover&quot;</span>: <span class="hljs-string">&quot;/images/theme/post-image.jpg&quot;</span>,  <br>  <span class="hljs-attr">&quot;description&quot;</span>: <span class="hljs-string">&quot;君未看花时，花与君同寂；君来看花日，花色一时明。&quot;</span>,  <br>  <span class="hljs-attr">&quot;photos&quot;</span>: [  <br>    <span class="hljs-string">&quot;/images/theme/post-image.jpg&quot;</span>,<br>    <span class="hljs-string">&quot;/images/theme/post-image.jpg&quot;</span>,<br>    <span class="hljs-string">&quot;/images/theme/post-image.jpg&quot;</span>,<br>    <span class="hljs-string">&quot;/images/theme/post-image.jpg&quot;</span><br>  ]<br>&#125;, &#123;<br>  <span class="hljs-attr">&quot;name&quot;</span>: <span class="hljs-string">&quot;记事&quot;</span>,<br>  <span class="hljs-attr">&quot;cover&quot;</span>: <span class="hljs-string">&quot;/images/theme/post-image.jpg&quot;</span>,<br>  <span class="hljs-attr">&quot;description&quot;</span>: <span class="hljs-string">&quot;翻开随身携带的记事本，写着许多事都是关于你。&quot;</span>,<br>  <span class="hljs-attr">&quot;photos&quot;</span>: [<br>    <span class="hljs-string">&quot;/images/theme/post-image.jpg&quot;</span>,<br>    <span class="hljs-string">&quot;/images/theme/post-image.jpg&quot;</span>,<br>    <span class="hljs-string">&quot;/images/theme/post-image.jpg&quot;</span>,<br>    <span class="hljs-string">&quot;/images/theme/post-image.jpg&quot;</span><br>  ]<br>&#125;]<br></code></pre></td></tr></table></figure>
<p>在 <code>/source/galleries/</code> 目录下 <code>新建文件夹</code> ，命名需要和 <code>json</code> 中的 <code>name</code> 字段对应，例如：_colorful_、_记事_。 在文件夹下新建 <code>index.md</code> 文件，内容如下：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-meta">---</span><br><span class="hljs-attr">title:</span> <span class="hljs-string">记事</span>  <span class="hljs-comment">#名称也需要对应</span><br><span class="hljs-attr">layout:</span> <span class="hljs-string">&quot;gallery&quot;</span><br><span class="hljs-meta">---</span><br></code></pre></td></tr></table></figure>
<p>步骤可能有点难以理解，最后放几张截图，比较直观：</p>
<p><a target="_blank" rel="noopener" href="https://pic.izhaoo.com/20200722185650.jpg"><img   class="lazyload" data-original="https://pic.izhaoo.com/20200722185650.jpg" src="" ></a>gallery-1</p>
<p><a target="_blank" rel="noopener" href="https://pic.izhaoo.com/20200722185721.jpg"><img   class="lazyload" data-original="https://pic.izhaoo.com/20200722185721.jpg" src="" ></a>gallery-2</p>
<p><a target="_blank" rel="noopener" href="https://pic.izhaoo.com/20200722185814.jpg"><img   class="lazyload" data-original="https://pic.izhaoo.com/20200722185814.jpg" src="" ></a>gallery-3</p>
<p><a target="_blank" rel="noopener" href="https://pic.izhaoo.com/20200722185829.jpg"><img   class="lazyload" data-original="https://pic.izhaoo.com/20200722185829.jpg" src="" ></a>gallery-4</p>
<p>也可以参考 <code>/_example/source</code> 中的相关栗子。</p>
<h3 id="归档页面"><a href="#归档页面" class="headerlink" title="归档页面"></a>归档页面</h3><p>参考 <a href="#%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95">导航菜单</a> 设置归档页面的导航，系统会按文章创建时间自动归档。</p>
<figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs dts"><span class="hljs-symbol">menu:</span><br><span class="hljs-symbol">  archives:</span> /archives || 归档<br></code></pre></td></tr></table></figure>
<h3 id="标签页面"><a href="#标签页面" class="headerlink" title="标签页面"></a>标签页面</h3><p>执行以下命令创建标签页面，会在 <code>source</code> 目录生成 <code>tags/index.md</code> 文件：</p>
<figure class="highlight haxe"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs haxe">$ hexo <span class="hljs-keyword">new</span> <span class="hljs-type">page</span> tags<br></code></pre></td></tr></table></figure>
<p>打开 <code>source/tags/index.md</code> 文件，设置 <code>Front-matter</code> ，开启标签页面：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-meta">---</span><br><span class="hljs-attr">title:</span> <span class="hljs-string">标签</span><br><span class="hljs-attr">type:</span> <span class="hljs-string">&quot;tags&quot;</span><br><span class="hljs-attr">layout:</span> <span class="hljs-string">&quot;tags&quot;</span><br><span class="hljs-meta">---</span><br></code></pre></td></tr></table></figure>
<p>参考 <a href="#%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95">导航菜单</a> 设置标签页面的导航：</p>
<figure class="highlight vim"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs vim"><span class="hljs-keyword">menu</span>:<br>  <span class="hljs-keyword">tag</span><span class="hljs-variable">s:</span> /<span class="hljs-keyword">tags</span> || 标签<br></code></pre></td></tr></table></figure>
<p>创建文章时，在文章的 <code>Front-matter</code> 中使用 <code>tags</code> 字段添加标签即可：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-meta">---</span><br><span class="hljs-attr">title:</span> <span class="hljs-string">zhaoo</span> <span class="hljs-bullet">-</span> <span class="hljs-string">主题使用文档</span><br><span class="hljs-attr">tags:</span> [<span class="hljs-string">Hexo</span>, <span class="hljs-string">主题</span>]  <span class="hljs-comment">#设置标签</span><br><span class="hljs-meta">---</span><br></code></pre></td></tr></table></figure>
<h3 id="分类页面"><a href="#分类页面" class="headerlink" title="分类页面"></a>分类页面</h3><p>同标签页面，更改一些关键词即可。</p>
<p>执行以下命令创建分类页面，会在 <code>source</code> 目录生成 <code>categories/index.md</code> 文件：</p>
<figure class="highlight haxe"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs haxe">$ hexo <span class="hljs-keyword">new</span> <span class="hljs-type">page</span> categories<br></code></pre></td></tr></table></figure>
<p>打开 <code>source/categories/index.md</code> 文件，设置 <code>Front-matter</code> ，开启分类页面：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-meta">---</span><br><span class="hljs-attr">title:</span> <span class="hljs-string">标签</span><br><span class="hljs-attr">type:</span> <span class="hljs-string">&quot;categories&quot;</span><br><span class="hljs-attr">layout:</span> <span class="hljs-string">&quot;categories&quot;</span><br><span class="hljs-meta">---</span><br></code></pre></td></tr></table></figure>
<p>参考 <a href="#%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95">导航菜单</a> 设置分类页面的导航：</p>
<figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs dts"><span class="hljs-symbol">menu:</span><br><span class="hljs-symbol">  categories:</span> /categories || 分类<br></code></pre></td></tr></table></figure>
<p>创建文章时，在文章的 <code>Front-matter</code> 中使用 <code>categories</code> 字段添加标签即可：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-meta">---</span><br><span class="hljs-attr">title:</span> <span class="hljs-string">zhaoo</span> <span class="hljs-bullet">-</span> <span class="hljs-string">主题使用文档</span><br><span class="hljs-attr">categories:</span>  <span class="hljs-comment">#设置分类</span><br><span class="hljs-bullet">-</span> <span class="hljs-string">项目</span><br><span class="hljs-bullet">-</span> <span class="hljs-string">博客</span><br><span class="hljs-meta">---</span><br></code></pre></td></tr></table></figure>
<h3 id="关于页面"><a href="#关于页面" class="headerlink" title="关于页面"></a>关于页面</h3><p>执行以下命令创建关于页面，会在 <code>source</code> 目录生成 <code>about/index.md</code> 文件：</p>
<figure class="highlight haxe"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs haxe">$ hexo <span class="hljs-keyword">new</span> <span class="hljs-type">page</span> about<br></code></pre></td></tr></table></figure>
<p>打开 <code>source/about/index.md</code> 文件，设置 <code>Front-matter</code> ，开启关于页面：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-meta">---</span><br><span class="hljs-attr">title:</span> <span class="hljs-string">标签</span><br><span class="hljs-attr">type:</span> <span class="hljs-string">&quot;about&quot;</span><br><span class="hljs-attr">layout:</span> <span class="hljs-string">&quot;about&quot;</span><br><span class="hljs-meta">---</span><br></code></pre></td></tr></table></figure>
<p>参考 <a href="#%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95">导航菜单</a> 设置关于页面的导航：</p>
<figure class="highlight mel"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs mel"><span class="hljs-keyword">menu</span>:<br>  <span class="hljs-keyword">about</span>: /<span class="hljs-keyword">about</span> || 关于<br></code></pre></td></tr></table></figure>
<p>在 <code>source/about/index.md</code> 中编写关于内容，如同写文章一样。</p>
<p>tips: 建议在 <strong>关于页面</strong> 关闭 <em>文章目录</em> 和 <em>文章版权</em> 功能，在 <code>Front-matter</code> 中添加 <code>toc</code> 和 <code>copyright</code> 字段都设置为 <code>false</code> 即可。</p>
<h2 id="插件配置"><a href="#插件配置" class="headerlink" title="插件配置"></a>插件配置</h2><h3 id="评论系统"><a href="#评论系统" class="headerlink" title="评论系统"></a>评论系统</h3><p>配置项 <code>comments</code> 用于配置评论系统，目前支持 <strong>Gitalk</strong>、<strong>Valine</strong>、<strong>畅言</strong> 三种评论系统。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">comments:</span><br>  <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span><br>  <span class="hljs-attr">type:</span> <span class="hljs-string">valine</span><br>  <span class="hljs-attr">button:</span> <span class="hljs-literal">true</span><br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>enable</code>: <em>开启</em> / <em>关闭</em> 评论功能。</li>
<li>  <code>type</code>: 开启哪种评论系统，需要配置对应的评论系统。（参考下文）</li>
<li>  <code>button</code>: <em>显示</em> / <em>隐藏</em> 评论按钮，隐藏按钮后将直接展示评论。</li>
</ul>
<h4 id="Gitalk"><a href="#Gitalk" class="headerlink" title="Gitalk"></a><a href="#Gitalk" title="Gitalk"></a>Gitalk</h4><p><strong>Gitalk</strong> 基于 <code>GitHub</code> 存储评论内容，优点是支持 <code>GitHub</code> 直接登录；缺点是需要 <strong>科学上网</strong> 才能访问，水土不服。</p>
<p><a target="_blank" rel="noopener" href="https://pic.izhaoo.com/2020111982651.jpg"><img   class="lazyload" data-original="https://pic.izhaoo.com/2020111982651.jpg" src="" ></a>Gitalk 演示</p>
<p>首先需要在 <a target="_blank" rel="noopener" href="https://github.com/new">GitHub</a> 创建一个仓库，如有 <code>GitHub Pages</code> 也可以共用一个仓库。</p>
<p><a target="_blank" rel="noopener" href="https://pic.izhaoo.com/202011193006.jpg"><img   class="lazyload" data-original="https://pic.izhaoo.com/202011193006.jpg" src="" ></a>创建仓库</p>
<p>接着创建一个 <a target="_blank" rel="noopener" href="https://github.com/settings/applications/new">Github Application</a>，填写相应的参数。创建完成后会生成 <code>clientID</code> 和 <code>clientSecret</code>，记录一下。</p>
<p><a target="_blank" rel="noopener" href="https://pic.izhaoo.com/20201119203435.png"><img   class="lazyload" data-original="https://pic.izhaoo.com/20201119203435.png" src="" ></a>创建应用</p>
<p>配置项 <code>gitalk</code> 用于配置 <code>Gitalk。</code></p>
<figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs dts"><span class="hljs-symbol">gitalk:</span><br><span class="hljs-symbol">  owner:</span><br><span class="hljs-symbol">  repo:</span><br><span class="hljs-symbol">  admin:</span><br><span class="hljs-symbol">  clientID:</span><br><span class="hljs-symbol">  clientSecret:</span><br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>owner</code>: <code>GitHub</code> 的用户名。</li>
<li>  <code>repo</code>: 创建的仓库名称。</li>
<li>  <code>admin</code>: <code>GitHub</code> 的用户名。</li>
<li>  <code>clientID</code>: 应用创建后生成。</li>
<li>  <code>clientSecret</code>: 应用创建后生成。</li>
</ul>
<h4 id="Valine"><a href="#Valine" class="headerlink" title="Valine"></a>Valine</h4><p><code>Valine</code> 是基于 <a target="_blank" rel="noopener" href="https://leancloud.cn/">LeanCloud</a> 实现的评论系统，小清新风格。</p>
<p><a target="_blank" rel="noopener" href="https://pic.izhaoo.com/2020111980022.jpg"><img   class="lazyload" data-original="https://pic.izhaoo.com/2020111980022.jpg" src="" ></a>Valine 演示</p>
<p>首先在 <a target="_blank" rel="noopener" href="https://leancloud.cn/">LeanCloud</a> 注册一个账号，并创建一个应用（开发版）。</p>
<p>进入应用管理界面，点击【存储】-&gt;【创建 Class】，名称为 <strong>Comment</strong>，访问权限为 <strong>所有用户</strong>，写入权限为 <strong>限制写入</strong>。</p>
<p>在【设置】-&gt;【应用 Keys】中复制 <code>appId</code> 和 <code>appKey</code>。</p>
<p>配置项 <code>valine</code> 用于设置 <code>Valine</code> 评论系统。</p>
<figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs dts"><span class="hljs-symbol">valine:</span><br><span class="hljs-symbol">  appId:</span><br><span class="hljs-symbol">  appKey:</span><br><span class="hljs-symbol">  placeholder:</span> 雁过留痕<br><span class="hljs-symbol">  avatar:</span> mp<br><span class="hljs-symbol">  pageSize:</span> <span class="hljs-number">10</span><br><span class="hljs-symbol">  lang:</span> zh-CN<br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>enable</code>: <em>开启</em> / <em>关闭</em> <code>Valine</code>。</li>
<li>  <code>appId</code>: 填入刚才得到的 <code>appId</code>。</li>
<li>  <code>appKey</code>: 填入刚才得到的 <code>appKey</code>。</li>
<li>  <code>placeholder</code>: 未输入评论时的占位文字。</li>
<li>  <code>mp</code>: 默认头像，参考 <a target="_blank" rel="noopener" href="https://valine.js.org/avatar.html">Valine 头像设置</a>。</li>
<li>  <code>pageSize</code>: 每页评论数量。</li>
<li>  <code>lang</code>: 系统语言。</li>
</ul>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://valine.js.org/">Valine</a></p>
</blockquote>
<h4 id="畅言"><a href="#畅言" class="headerlink" title="畅言"></a>畅言</h4><p><strong>畅言</strong> 是搜狐家的评论系统，优点是支持 <code>QQ</code>、<code>手机</code>、<code>邮箱</code> 等多种登录方式，接地气；个人感觉 <code>UI</code> 不是我的菜。</p>
<p><a target="_blank" rel="noopener" href="https://pic.izhaoo.com/2020111984224.jpg"><img   class="lazyload" data-original="https://pic.izhaoo.com/2020111984224.jpg" src="" ></a>畅言演示</p>
<p>在 <a target="_blank" rel="noopener" href="http://changyan.kuaizhan.com/">畅言</a> 注册账号，进入后台创建一个站点，在【后台总览】记录一下 <code>APP ID</code> 和 <code>APP KEY</code>。</p>
<p>配置项 <code>changyan</code> 用于设置 <code>畅言评论</code>。</p>
<figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs dts"><span class="hljs-symbol">changyan:</span><br><span class="hljs-symbol">  appId:</span><br><span class="hljs-symbol">  conf:</span><br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>appId</code>: 生成的 <code>APP ID</code>。</li>
<li>  <code>conf</code>: 生成的 <code>APP KEY</code>。</li>
</ul>
<p>畅言的相关配置在【管理后台】设置，可参考官方文档进行配置。</p>
<h3 id="DaoVoice-客户沟通"><a href="#DaoVoice-客户沟通" class="headerlink" title="DaoVoice (客户沟通)"></a>DaoVoice (客户沟通)</h3><p><a target="_blank" rel="noopener" href="http://www.daovoice.io/">DaoVoice</a> 是一款客户沟通插件，支持即时通讯、留言等形式反馈消息。</p>
<p><a target="_blank" rel="noopener" href="https://pic.izhaoo.com/20200808141245.jpg"><img   class="lazyload" data-original="https://pic.izhaoo.com/20200808141245.jpg" src="" ></a>DaoVoice 演示</p>
<p>因为官方的 <code>Fab</code> 按钮 和 主题 <code>Fab</code> 按钮会重叠，所以作者同学把他集成到主题 <code>Fab</code> 中了。</p>
<p><a target="_blank" rel="noopener" href="https://pic.izhaoo.com/20200808141349.jpg"><img   class="lazyload" data-original="https://pic.izhaoo.com/20200808141349.jpg" src="" ></a>官网 Fab</p>
<p><a target="_blank" rel="noopener" href="https://pic.izhaoo.com/20200808141304.jpg"><img   class="lazyload" data-original="https://pic.izhaoo.com/20200808141304.jpg" src="" ></a>主题 Fab</p>
<p>首先在 <a target="_blank" rel="noopener" href="http://dashboard.daovoice.io/">DaoVoice</a> 官网上注册一个账号。</p>
<p>在【安装应用】页面，复制 <code>app_id</code>。</p>
<p><a target="_blank" rel="noopener" href="https://pic.izhaoo.com/20200808135815.jpg"><img   class="lazyload" data-original="https://pic.izhaoo.com/20200808135815.jpg" src="" ></a>appid</p>
<p>配置项 <code>daovoice</code> 配置应用。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">daovoice:</span><br>  <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span><br>  <span class="hljs-attr">appId:</span> <span class="hljs-string">abcdefg</span><br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>enable</code>: <em>开启</em> / <em>关闭</em> DaoVoice。</li>
<li>  <code>appId</code>: 填写之前复制的 <code>app_id</code>。</li>
</ul>
<p>点击 <code>Fab</code> 中的 <strong>消息图标</strong> 即可打开。</p>
<h3 id="腾讯兔小巢-意见反馈平台"><a href="#腾讯兔小巢-意见反馈平台" class="headerlink" title="腾讯兔小巢 (意见反馈平台)"></a>腾讯兔小巢 (意见反馈平台)</h3><p><a target="_blank" rel="noopener" href="https://txc.qq.com/">腾讯兔小巢</a> 是一款用户意见反馈平台。</p>
<p>首先在 <a target="_blank" rel="noopener" href="https://txc.qq.com/">腾讯兔小巢</a> 官网上注册一个产品，在 <a target="_blank" rel="noopener" href="https://txc.qq.com/dashboard/products/">产品设置</a> 中复制 <code>ID</code>。</p>
<p>配置项 <code>tencentChao</code> 用于配置兔小巢。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">tencentChao:</span><br>  <span class="hljs-attr">enable:</span> <span class="hljs-literal">false</span><br>  <span class="hljs-attr">appId:</span><br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>enable</code>: <em>开启</em> / <em>关闭</em> 兔小巢。</li>
<li>  <code>appId</code>: 填写之前复制的 <code>ID</code>。</li>
</ul>
<h3 id="LeanCloud-页面统计"><a href="#LeanCloud-页面统计" class="headerlink" title="LeanCloud (页面统计)"></a>LeanCloud (页面统计)</h3><p><strong>LeanCloud</strong> 是一款 <code>ServerLess</code> 服务，主题中被用来统计每个页面的访问量，并在页面中展示。</p>
<p>首先在 <a target="_blank" rel="noopener" href="https://leancloud.cn/">LeanCloud</a> 注册一个账号，并创建一个应用（开发版）。</p>
<p>进入应用管理界面，点击【存储】-&gt;【创建 Class】，名称为 <strong>Counter</strong>，访问权限为 <strong>所有用户</strong>，写入权限为 <strong>限制写入</strong>，如下：</p>
<p><a target="_blank" rel="noopener" href="https://pic.izhaoo.com/202011194911.jpg"><img   class="lazyload" data-original="https://pic.izhaoo.com/202011194911.jpg" src="" ></a>创建 LeanCloud</p>
<p>在【设置】-&gt;【应用 Keys】中复制 <code>appId</code> 和 <code>appKey</code>。</p>
<p>配置项 <code>leancloud</code> 用于设置 <code>LeanCloud</code>。</p>
<figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs dts"><span class="hljs-symbol">leancloud:</span><br><span class="hljs-symbol">  enable:</span> true<br><span class="hljs-symbol">  appId:</span><br><span class="hljs-symbol">  appKey:</span><br><span class="hljs-symbol">  serverURLs:</span> https:<span class="hljs-comment">//leancloud.cn/</span><br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>enable</code>: <em>开启</em> / <em>关闭</em> <code>LeanCloud</code>。</li>
<li>  <code>appId</code>: 填入刚才得到的 <code>appId</code>。</li>
<li>  <code>appKey</code>: 填入刚才得到的 <code>appKey</code>。</li>
<li>  <code>serverURLs</code>: 服务路径不用改，保持 <code>https://leancloud.cn/</code> 就可以了。</li>
</ul>
<h3 id="LazyLoad-图片懒加载"><a href="#LazyLoad-图片懒加载" class="headerlink" title="LazyLoad (图片懒加载)"></a>LazyLoad (图片懒加载)</h3><p>配置项 <code>lazyload</code> 用于配置图片懒加载。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">lazyload:</span><br>  <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span><br>  <span class="hljs-attr">only_post:</span> <span class="hljs-literal">false</span><br>  <span class="hljs-attr">loading:</span> <span class="hljs-string">/images/theme/loading.gif</span><br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>enable</code>: <em>开启</em> / <em>关闭</em> 图片懒加载。</li>
<li>  <code>onlyPost</code>: 只对对文章中的图片开启懒加载功能。</li>
<li>  <code>loading</code>: 加载动画，默认是开启 <code>placeholder（占位图）</code> 的，可以在网上下载喜欢的动图，填写 <code>图片URL</code> 即可。</li>
</ul>
<h3 id="FancyBox-图片灯箱"><a href="#FancyBox-图片灯箱" class="headerlink" title="FancyBox (图片灯箱)"></a>FancyBox (图片灯箱)</h3><p>配置项 <code>FancyBox</code> 用于设置图片灯箱效果，开启后点击文章中的图片会以幻灯片的形式播放。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">fancybox:</span> <span class="hljs-literal">true</span><br></code></pre></td></tr></table></figure>
<h3 id="Pjax-无刷新加载"><a href="#Pjax-无刷新加载" class="headerlink" title="Pjax (无刷新加载)"></a>Pjax (无刷新加载)</h3><p>配置项 <code>pjax</code> 用于设置无刷新加载，开启后让你的博客嗖嗖嗖~</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">pjax:</span> <span class="hljs-literal">true</span><br></code></pre></td></tr></table></figure>
<p>tips: 该功能暂时不稳定，会引起一些特效、功能的异常，暂时不建议开启。</p>
<h3 id="HighLight-代码高亮"><a href="#HighLight-代码高亮" class="headerlink" title="HighLight (代码高亮)"></a>HighLight (代码高亮)</h3><p>在 <strong>博客配置</strong> 中开启代码高亮效果：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">highlight:</span><br>  <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>  <br>  <span class="hljs-attr">line_number:</span> <span class="hljs-literal">true</span><br>  <span class="hljs-attr">auto_detect:</span> <span class="hljs-literal">true</span><br>  <span class="hljs-attr">hljs:</span> <span class="hljs-literal">true</span><br>  <span class="hljs-attr">tab_replace:</span><br></code></pre></td></tr></table></figure>
<p>配置项 <code>highlight</code> 用于设置代码高亮效果。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">highlight:</span><br>  <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span><br>  <span class="hljs-attr">style:</span> <br>    <span class="hljs-attr">light:</span> <span class="hljs-string">Xcode</span><br>    <span class="hljs-attr">dark:</span> <span class="hljs-string">Solarized</span> <span class="hljs-string">Dark</span><br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>enable</code>: <em>开启</em> / <em>关闭</em> 代码高亮。</li>
<li>  <code>style -&gt; light</code>: <em>浅色模式</em> 时的高亮样式。</li>
<li>  <code>style -&gt; dark</code>: <em>深色模式</em> 时的高亮样式。</li>
</ul>
<p>可以到 <a target="_blank" rel="noopener" href="https://highlightjs.org/static/demo/">官网</a> 预览高亮效果，填写样式名称即可。</p>
<h3 id="SEO"><a href="#SEO" class="headerlink" title="SEO"></a>SEO</h3><p>配置项 <code>seo</code> 用于设置 SEO（网站关键词优化）功能。</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-attr">seo:</span><br>  <span class="hljs-attr">baidu_auto_push:</span> <span class="hljs-literal">true</span><br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>baidu_auto_push</code>: 开启 <a target="_blank" rel="noopener" href="https://ziyuan.baidu.com/linksubmit/index">百度站长平台</a> 链接自动推送功能。</li>
</ul>
<h3 id="网页统计"><a href="#网页统计" class="headerlink" title="网页统计"></a>网页统计</h3><p>配置项 <code>analytics</code> 用于设置网站统计。</p>
<figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs dts"><span class="hljs-symbol">analytics:</span><br><span class="hljs-symbol">  baidu:</span> <br><span class="hljs-symbol">  google:</span> <br><span class="hljs-symbol">  tencent:</span> <br><span class="hljs-symbol">  cnzz:</span><br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>baidu</code>: <a target="_blank" rel="noopener" href="https://tongji.baidu.com/web/welcome/login">百度统计</a></li>
<li>  <code>google</code>: <a target="_blank" rel="noopener" href="https://analytics.google.com/analytics/web">谷歌统计</a></li>
<li>  <code>tencent</code>: <a target="_blank" rel="noopener" href="https://ta.qq.com/#/">腾讯分析</a></li>
<li>  <code>cnzz</code>: <a target="_blank" rel="noopener" href="https://www.umeng.com/web">友盟统计</a></li>
</ul>
<p>在对应的数据统计官网注册网站应用，复制对应的 <code>id</code> 填写即可。</p>
<h2 id="脚本配置"><a href="#脚本配置" class="headerlink" title="脚本配置"></a>脚本配置</h2><h3 id="CDN"><a href="#CDN" class="headerlink" title="CDN"></a>CDN</h3><p>对于外部静态文件（CSS 或 JS），可以使用第三方 <code>CDN</code> 库进行优化加速。</p>
<p>配置项 <code>vendors</code> 用于设置静态库引入位置，直接输入 <code>URL</code> 即可。您可以保持默认配置（BootCDN）, 留空则从本地引入。</p>
<figure class="highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs awk">vendors:<br>  jquery_js: https:<span class="hljs-regexp">//</span>cdn.bootcss.com<span class="hljs-regexp">/jquery/</span><span class="hljs-number">3.4</span>.<span class="hljs-number">1</span>/jquery.min.js<br>  fancybox_js: https:<span class="hljs-regexp">//</span>cdn.bootcss.com<span class="hljs-regexp">/fancybox/</span><span class="hljs-number">3.5</span>.<span class="hljs-number">7</span>/jquery.fancybox.min.js<br>  pjax_js: https:<span class="hljs-regexp">//</span>cdn.bootcss.com<span class="hljs-regexp">/jquery.pjax/</span><span class="hljs-number">2.0</span>.<span class="hljs-number">1</span>/jquery.pjax.min.js<br>  lazyload_js: https:<span class="hljs-regexp">//</span>cdn.bootcdn.net<span class="hljs-regexp">/ajax/</span>libs<span class="hljs-regexp">/jquery.lazyload/</span><span class="hljs-number">1.9</span>.<span class="hljs-number">1</span>/jquery.lazyload.min.js<br>  fancybox_css: https:<span class="hljs-regexp">//</span>cdn.bootcss.com<span class="hljs-regexp">/fancybox/</span><span class="hljs-number">3.5</span>.<span class="hljs-number">7</span>/jquery.fancybox.min.css<br>  highlight_css: https:<span class="hljs-regexp">//</span>cdn.bootcss.com<span class="hljs-regexp">/highlight.js/</span><span class="hljs-number">9.18</span>.<span class="hljs-number">1</span><span class="hljs-regexp">/styles/</span>xcode.min.css<br>  iconfont_css: <span class="hljs-regexp">//</span>at.alicdn.com<span class="hljs-regexp">/t/</span>font_1445822_58xq2j9v1id.css<br></code></pre></td></tr></table></figure>
<h3 id="脚本埋点"><a href="#脚本埋点" class="headerlink" title="脚本埋点"></a>脚本埋点</h3><p>有时候我们需要埋入一些第三方脚本，例如 <code>百度统计</code>、<code>百度SEO</code> 等，主题在 <strong>头部</strong> 和 <strong>尾部</strong> 分别开放了埋点入口，通过配置项 <code>custom</code> 进行配置。</p>
<figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs dts"><span class="hljs-symbol">custom:</span><br><span class="hljs-symbol">  head:</span><br><span class="hljs-symbol">  foot:</span><br><span class="hljs-symbol">  css:</span><br><span class="hljs-symbol">  js:</span><br></code></pre></td></tr></table></figure>
<ul>
<li>  <code>head</code>: 引入头部的代码。</li>
<li>  <code>foot</code>: 引入尾部的代码。</li>
<li>  <code>css</code>: 外部引入的 <code>CSS</code> 链接。</li>
<li>  <code>js</code>: 外部引入的 <code>JS</code> 链接。</li>
</ul>

      </section>
      <section class="extra">
        
        
          <section class="donate">
  <div id="qrcode-donate">
    <img   class="lazyload" data-original="/images/theme/alipay.jpg" src="" >
  </div>
  <div class="icon">
    <a href="javascript:;" id="alipay"><i class="iconfont iconalipay"></i></a>
    <a href="javascript:;" id="wechat"><i class="iconfont iconwechat-fill"></i></a>
  </div>
</section>
        
        
  <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/tags/hexo-Gitee-%E5%8D%9A%E5%AE%A2-Themes/" rel="tag">hexo , Gitee,博客,Themes</a></li></ul> 

        
  <nav class="nav">
    <a href="/2021/01/11/%E5%BF%AB%E9%80%9F%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%20Hexo%20&&%20Gitee/"><i class="iconfont iconleft"></i>快速搭建个人博客 Hexo && Gitee</a>
    <a href="/2020/08/15/Hexo%20%E6%96%87%E7%AB%A0%E5%A4%B4%E9%83%A8%E6%A8%A1%E6%9D%BF/">Hexo 文章头部模板<i class="iconfont iconright"></i></a>
  </nav>

      </section>
      
        <section class="comments">
  
  
<div id="valine"></div>
<script defer src="//unpkg.com/valine/dist/Valine.min.js"></script>
<script>
  window.onload = function () {
    var loadValine = function () {
      new Valine({
        el: '#valine',
        app_id: "DT7lf4wjyGz3dzFvkNWkjDjw-gzGzoHsz",
        app_key: "0BFENrKLIvytrnTsCPNxF5tP",
        placeholder: "雁过留痕",
        avatar: "mp",
        pageSize: "10",
        lang: "zh-CN",
      });
    }
    if ( false ) {
      $("#comments-btn").on("click", function () {
        $(this).hide();
        loadValine();
      });
    } else {
      loadValine();
    }
  };
</script>

</section>
      
    </section>
  </div>
</article></div>
      <div class="col-xl-3">
        
          
  <aside class="toc-wrap">
    <h3 class="toc-title">文章目录：</h3>
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%B3%E4%BA%8E%E6%8C%87%E5%8D%97"><span class="toc-text">关于指南</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B"><span class="toc-text">快速开始</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BB%E9%A2%98%E5%AE%89%E8%A3%85"><span class="toc-text">主题安装</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BC%80%E5%90%AF%E4%B8%BB%E9%A2%98"><span class="toc-text">开启主题</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8D%9A%E5%AE%A2%E9%85%8D%E7%BD%AE"><span class="toc-text">博客配置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BB%E9%A2%98%E6%9B%B4%E6%96%B0"><span class="toc-text">主题更新</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE"><span class="toc-text">全局配置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95"><span class="toc-text">导航菜单</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%BB%E9%A2%98%E9%A2%9C%E8%89%B2"><span class="toc-text">主题颜色</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%AB%99%E7%82%B9%E5%9B%BE%E6%A0%87"><span class="toc-text">站点图标</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%A8%E5%B1%80%E5%AD%97%E4%BD%93"><span class="toc-text">全局字体</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87"><span class="toc-text">背景图片</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Loading-%E5%8A%A0%E8%BD%BD%E5%8A%A8%E7%94%BB"><span class="toc-text">Loading (加载动画)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%AC%A2%E8%BF%8E%E9%A1%B5%E9%9D%A2"><span class="toc-text">欢迎页面</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%89%88%E6%9D%83%E4%BF%A1%E6%81%AF"><span class="toc-text">版权信息</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%A4%BE%E4%BA%A4%E9%93%BE%E6%8E%A5"><span class="toc-text">社交链接</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Fab-%E5%8F%B3%E4%B8%8B%E8%A7%92%E6%8C%89%E9%92%AE"><span class="toc-text">Fab (右下角按钮)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8C%E7%BB%B4%E7%A0%81"><span class="toc-text">二维码</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B7%B1%E8%89%B2%E6%A8%A1%E5%BC%8F"><span class="toc-text">深色模式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%93%80%E6%82%BC%E6%A8%A1%E5%BC%8F"><span class="toc-text">哀悼模式</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E9%85%8D%E7%BD%AE"><span class="toc-text">文章配置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E5%B0%81%E9%9D%A2"><span class="toc-text">文章封面</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%B3%E9%94%AE%E8%AF%8D"><span class="toc-text">关键词</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E5%B0%BA%E5%AF%B8"><span class="toc-text">文章尺寸</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%BE%E7%89%87%E6%A0%87%E6%B3%A8"><span class="toc-text">图片标注</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E7%9B%AE%E5%BD%95"><span class="toc-text">文章目录</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%89%93%E8%B5%8F%E4%BA%8C%E7%BB%B4%E7%A0%81"><span class="toc-text">打赏二维码</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E7%89%88%E6%9D%83"><span class="toc-text">文章版权</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E6%90%AC%E8%BF%90"><span class="toc-text">文章搬运</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E7%BD%AE%E9%A1%B6"><span class="toc-text">文章置顶</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E5%AD%A6%E5%85%AC%E5%BC%8F"><span class="toc-text">数学公式</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2%E9%85%8D%E7%BD%AE"><span class="toc-text">页面配置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%9B%B8%E5%86%8C%E9%A1%B5%E9%9D%A2"><span class="toc-text">相册页面</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BD%92%E6%A1%A3%E9%A1%B5%E9%9D%A2"><span class="toc-text">归档页面</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A0%87%E7%AD%BE%E9%A1%B5%E9%9D%A2"><span class="toc-text">标签页面</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%86%E7%B1%BB%E9%A1%B5%E9%9D%A2"><span class="toc-text">分类页面</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%B3%E4%BA%8E%E9%A1%B5%E9%9D%A2"><span class="toc-text">关于页面</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8F%92%E4%BB%B6%E9%85%8D%E7%BD%AE"><span class="toc-text">插件配置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F"><span class="toc-text">评论系统</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#DaoVoice-%E5%AE%A2%E6%88%B7%E6%B2%9F%E9%80%9A"><span class="toc-text">DaoVoice (客户沟通)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%85%BE%E8%AE%AF%E5%85%94%E5%B0%8F%E5%B7%A2-%E6%84%8F%E8%A7%81%E5%8F%8D%E9%A6%88%E5%B9%B3%E5%8F%B0"><span class="toc-text">腾讯兔小巢 (意见反馈平台)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#LeanCloud-%E9%A1%B5%E9%9D%A2%E7%BB%9F%E8%AE%A1"><span class="toc-text">LeanCloud (页面统计)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#LazyLoad-%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD"><span class="toc-text">LazyLoad (图片懒加载)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#FancyBox-%E5%9B%BE%E7%89%87%E7%81%AF%E7%AE%B1"><span class="toc-text">FancyBox (图片灯箱)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Pjax-%E6%97%A0%E5%88%B7%E6%96%B0%E5%8A%A0%E8%BD%BD"><span class="toc-text">Pjax (无刷新加载)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#HighLight-%E4%BB%A3%E7%A0%81%E9%AB%98%E4%BA%AE"><span class="toc-text">HighLight (代码高亮)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#SEO"><span class="toc-text">SEO</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BD%91%E9%A1%B5%E7%BB%9F%E8%AE%A1"><span class="toc-text">网页统计</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%84%9A%E6%9C%AC%E9%85%8D%E7%BD%AE"><span class="toc-text">脚本配置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#CDN"><span class="toc-text">CDN</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%84%9A%E6%9C%AC%E5%9F%8B%E7%82%B9"><span class="toc-text">脚本埋点</span></a></li></ol></li></ol>
  </aside>

        
      </div>
    </div>
  </div>
</main>
  

<footer class="footer">
  <div class="footer-social"><a 
        href="tencent://message/?Menu=yes&uin=574385240 "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#DA2E76'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconQQ "></i>
      </a><a 
        href="javascript:; "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#09BB07'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconwechat-fill "></i>
      </a><a 
        href="https://www.instagram.com/ "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#DA2E76'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconinstagram "></i>
      </a><a 
        href="https://github.com/xiaozhoujun "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#9f7be1'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  icongithub-fill "></i>
      </a><a 
        href="mailto:xiaozhou1650@gmail.com "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#DA2E76'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconmail "></i>
      </a></div>
  
    <div class="footer-copyright"><p>Powered by <a target="_blank" href="https://hexo.io">Hexo</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p></div>
  
</footer>
  
      <div class="fab fab-plus">
    <i class="iconfont iconplus"></i>
  </div>
  
  
  <div class="fab fab-up">
    <i class="iconfont iconcaret-up"></i>
  </div>
  
  
    <div class="scrollbar j-scrollbar">
  <div class="scrollbar-current j-scrollbar-current"></div>
</div>
  
  
    
<script src="/js/color-mode.js"></script>

  
<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/assets/shizuku.model.json"},"display":{"position":"Left","width":150,"height":300},"mobile":{"show":true},"log":false});</script></body>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>



  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>




  
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>








<script src="/js/utils.js"></script>
<script src="/js/script.js"></script>







  <script>
    (function () {
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
      } else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
      }
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>













</html>